<style lang="less">
    @import "./main.less";
    .tree-box-on{
        transition: all 0.05s ease;
        position: absolute;
        z-index: 999;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 100%;
        background: #fff;
        box-shadow: 3px 1px 2px #00000021;
        >.showSwitch{
            
        }
    }
    .tree-box-off{
        transition: all 0.05s ease;
        position: absolute;
        z-index: 999;
        top: 0px;
        left: -400px;
        width: 400px;
        height: 100%;
        background: #fff;
        box-shadow: 3px 1px 2px #00000021;
        .showSwitch:hover{
            width: 60px;
            right: -60px;
            >.showSwitch-t{
                display: block;
            }
        }
    }
    .showSwitch{
        width: 30px;
        height: 30px;
        position: absolute;
        right: -30px;
        top: 25px;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        background:#57a3f3;
        transition: all 0.2s ease;
        overflow: hidden;
        box-shadow: 2px 0px 2px #00000021;
        cursor:pointer;
        color: #fff;
        border-radius: 0px 5px 5px 0px;
    }
    .showSwitch-t{
        display: none;
    }
    .line-chart-con-tree{
        margin: 10px;
        margin-top: 0px;
        border:1px solid #eee;
        height: calc(~"100% - 70px");
        overflow:scroll;
    }
    .setup{
        height: 50px;
        width: 100%;
        line-height: 50px;
        text-align: center;
    }
    .treeShade{
        width:100%;
        height:100%;
        background:#0000001f;
        position: absolute;
        top: 0px;
        z-index: 998;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
<template>
    <div class="main" :class="{'main-hide-text': shrink}">
        
        <div class="sidebar-menu-con" :style="{width: shrink?'60px':'184px','overflow-x': 'hidden'}">
            <div class="sidebar-menu-con-box" :style="{width: shrink?'60px':'200px', 'overflow-y': shrink ? 'visible' : 'scroll',height:'100%','overflow-x': 'hidden'}">
                <shrinkable-menu
                    :shrink="shrink"
                    @on-change="handleSubmenuChange"
                    :theme="menuTheme" 
                    :before-push="beforePush"
                    :open-names="openedSubmenuArr"
                    :menu-list="menuList">
                    <div slot="top" class="logo-con" >
                        <span :class="this.shrink ? 'l-logo-e' : 'l-logo-o'">Lottery Admin</span>
                        <div :class="this.shrink ? 'l-box-e' : this.isMac ? 'l-box-o' : 'l-box-o-w'">
                            <Button :class="this.shrink ? 'l-but-e' : 'l-but-o'" type="text" @click="toggleClick"></Button>
                        </div>
                    </div>
                </shrinkable-menu>
            </div>
        </div>
        <div class="main-header-con" :style="{paddingLeft: shrink?'60px':'184px'}">
            <div class="main-header">
                <div class="header-middle-con">
                    <!--
                    <div class="main-breadcrumb">
                        <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
                    </div>
                    -->
                    <router-link to="/reporting-manage/sszd">
                        <Button class="t-but" type="text">
                            &ensp;&ensp;普通投注
                        </Button>
                    </router-link>
                    <router-link to="/user-manage/vip-manage">
                        <Button class="t-but" type="text">
                            &ensp;&ensp;用户列表
                        </Button>
                    </router-link>
                    <router-link to="/business-manage/account-action">
                        <Button class="t-but" type="text">
                            &ensp;&ensp;资金操作
                        </Button>
                    </router-link>
                    <Button class="t-but" type="text" @click="clearCache" v-if="userInfo.group_level<3">
                        &ensp;&ensp;清除缓存
                    </Button>
                    <!-- <Button class="t-but" type="text" @click="reboot">
                        &ensp;&ensp;重启服务
                    </Button> -->
                </div>
                
                <div class="header-avator-con">
                    <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
                    <lock-screen></lock-screen>
                    <!-- <message-tip v-model="mesCount"></message-tip> -->
                    <theme-switch></theme-switch>
                    
                    <div class="user-dropdown-menu-con">
                        <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                            <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
                                <a href="javascript:void(0)">
                                    <span class="main-user-name">{{ userName.name }}</span>
                                    <Icon type="arrow-down-b"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <!-- <DropdownItem name="ownSpace">个人中心</DropdownItem> -->
                                    <DropdownItem name="loginout" divided>退出登录</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                            <Avatar :src="avatorPath" shape="square" style="background: #619fe7;margin-left: 10px;"></Avatar>
                            <!-- <Avatar style="margin-left: 10px;">C</Avatar> -->
                        </Row>
                    </div>
                </div>
            </div>
            <div class="tags-con">
                <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
            </div>
        </div>
        <div class="single-page-con" :style="{left: shrink?'60px':'184px'}">
            <div class="single-page">
                <keep-alive :include="cachePage">
                    <router-view v-if="isRouterAlive"></router-view>
                </keep-alive>
            </div>
            <div v-if="treeShow" :class="tree_box?'tree-box-on':'tree-box-off'" ref="treebox">
                <div class="showSwitch" @click="showSwitch()">
                    <span class="showSwitch-t">代理树</span>
                    <Icon v-if="!tree_box" class="showSwitch-l" type="arrow-right-a"></Icon>
                    <Icon v-if="tree_box" type="arrow-left-a"></Icon>
                </div>
                <div class="setup">
                    <span v-if="userFilter.id!=''" style="">
                            <ButtonGroup v-if="dshow" size="small" shape="circle" style="">
                                <Button :type="userFilter.vbankers==false?'primary':'ghost'" @click="userFilter.vbankers=false;updateTree()">
                                    会员
                                </Button>
                                <Button :type="userFilter.vbankers==true?'primary':'ghost'" @click="userFilter.vbankers=true;updateTree()">
                                    代理
                                </Button>
                            </ButtonGroup>
                            <Checkbox v-model="userFilter.directly" @on-change="updateTree()" label="直属">直属</Checkbox>
                    </span>
                </div>
                <div class="line-chart-con-tree">
                    <oc-tree :list.sync='treeData' :func='nodeClick' :contextmenu='contextmenuClick' :is-open='true'></oc-tree>
                </div>
            </div>
            <transition>
                <div v-if="tree_box&&treeShow" class="treeShade" @click="showSwitch()"></div>
            </transition>
        </div>
        
    </div>
</template>
<script>
    import crypto from 'crypto'
    import Identicon from 'identicon.js'
    import shrinkableMenu from './components/shrinkable-menu/shrinkable-menu.vue';
    import tagsPageOpened from './components/tags-page-opened.vue';
    import breadcrumbNav from './components/breadcrumb-nav.vue';
    import fullScreen from './components/fullscreen.vue';
    import lockScreen from './components/lockscreen/lockscreen.vue';
    import messageTip from './components/message-tip.vue';
    import themeSwitch from './components/theme-switch/theme-switch.vue';
    import util from '@/libs/util.js';
    
    export default {
        components: {
            shrinkableMenu,
            tagsPageOpened,
            breadcrumbNav,
            fullScreen,
            lockScreen,
            messageTip,
            themeSwitch
        },
        provide () {
            return {
            reload: this.reload
            }
        },
        data () {
            return {
                userInfo:{},
                treeData:[],
                tree_box:false,
                shrink: false,
                userName: '',
                isFullScreen: false,
                openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
                isMac:'',
                userFilter:{
                    id:0,
                    directly:false,
                    vbankers:false,
                },
                isRouterAlive: true,
                avatorPath:''
            };
        },
        computed: {
            
            treeShow () {
                return this.$store.state.app.tree.show;
            },
            menuList () {
                return this.$store.state.app.menuList;
            },
            pageTagsList () {
                return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
            },
            currentPath () {
                
                return this.$store.state.app.currentPath; // 当前面包屑数组
            },
            // avatorPath () {
            //     return sessionStorage.avatorImgPath;
            // },
            cachePage () {
                return this.$store.state.app.cachePage;
            },
            lang () {
                return this.$store.state.app.lang;
            },
            menuTheme () {
                return this.$store.state.app.menuTheme;
            },
            mesCount () {
                return this.$store.state.app.messageCount;
            },
            dshow () {
                return this.$store.state.app.tree.dshow
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false
                this.$nextTick(() => (this.isRouterAlive = true))
            },
            updateTree(){
                this.$store.commit('setTree',JSON.parse(JSON.stringify(this.userFilter)))
            },
            reboot(){
                this.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('Icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'load-c',
                                    size: 18
                                }
                            }),
                            h('div', '正在重启服务器，请稍等。。')
                        ])
                    }
                });
                this.$api.reboot().then(response=>{
                    response.json().then(responseJson=> {
                        this.$Spin.hide();
                        if(responseJson.success){
                            this.$Notice.success({
                                title: '服务器重启成功',
                            });
                        }else{
                            this.$Notice.error({
                                title: '重启失败',
                            });
                        }
                    })
                })
            },
            clearCache(){
                this.$api.clearCache().then(response=>{
                    response.json().then(responseJson=> {
                        if(responseJson.success){
                            this.$Notice.success({
                                title: '清除缓存成功',
                            });
                        }
                    })
                })
            },
            getTree(){
                let _this=this
                this.$api.repeater(this,'getNodeList').then(res=>{
                    if(_this.treeData.length>0){
                        _this.$set(_this.treeData,0, res.data)
                    }else{
                        _this.treeData.push(res.data)
                    }
                })
                // this.$api.getNodeList().then(response=>{
                //     response.json().then(responseJson=> {
                //         if(_this.treeData.length>0){
                //             _this.$set(_this.treeData,0, responseJson.data)
                //         }else{
                //             _this.treeData.push(responseJson.data)
                //         }
                //     })
                // })
            },
            // 树，点击节点
            nodeClick(m){
                let p=JSON.parse(JSON.stringify(m))
                this.userFilter.id=p.User.id
                this.updateTree()
            },
            // 树，右击事件
            contextmenuClick(m){

            },
            showSwitch(){
                this.tree_box=!this.tree_box
            },
            init () {
                let pathArr = util.setCurrentPath(this, this.$route.name);
                this.$store.commit('updateMenulist');
                if (pathArr.length >= 2) {
                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                this.userName = JSON.parse(sessionStorage.getItem('users'));
                let messageCount = 3;
                this.messageCount = messageCount.toString();
                this.checkTag(this.$route.name);
                // this.$store.commit('setMessageCount', 1);
            },
            toggleClick () {
                this.shrink = !this.shrink;
            },
            handleClickUserDropdown (name) {
                if (name === 'ownSpace') {
                    util.openNewPage(this, 'ownspace_index');
                    this.$router.push({
                        name: 'ownspace_index'
                    });
                } else if (name === 'loginout') {
                    // 退出登录
                    this.$store.commit('logout', this);
                    this.$store.commit('clearOpenedSubmenu');
                    this.$router.push({
                        name: 'login'
                    });
                }
            },
            checkTag (name) {
                let openpageHasTag = this.pageTagsList.some(item => {
                    if (item.name === name) {
                        return true;
                    }
                });
                if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
                    util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
                }
            },
            handleSubmenuChange (val) {

            },
            beforePush (name) {
                // if (name === 'accesstest_index') {
                //     return false;
                // } else {
                //     return true;
                // }
                return true;
            },
            fullscreenChange (isFullScreen) {

            }
        },
        watch: {
            '$route' (to) {
                this.$store.commit('setCurrentPageName', to.name);
                let pathArr = util.setCurrentPath(this, to.name);
                if (pathArr.length > 2) {
                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                this.checkTag(to.name);
                sessionStorage.currentPageName = to.name;
            },
            lang () {
                util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
            },
            openedSubmenuArr () {
                
            }
        },
        mounted () {
            let u=JSON.parse(sessionStorage.user)
            this.userInfo=u.user_data.User
            this.getTree()
            this.init();
            this.isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
            let hash = crypto.createHash('md5')
            hash.update(this.userName.name); // 传入用户名
            let imgData = new Identicon(hash.digest('hex')).toString()
            let imgUrl = 'data:image/png;base64,'+imgData // 这就是头像的base64码
            this.avatorPath = imgUrl
        },
        created () {
            
            // 显示打开的页面的列表
            this.$store.commit('setOpenedList');
        }
    };
</script>
